<template>
    <div class="b-blank">
        <i-form>
            <i-form-item label="显示高度：">
                <i-slider
                    v-model="height"
                    :min="1"
                    :max="70">
                </i-slider>
            </i-form-item>
            <i-form-item label="背景色：">
                <color-input :color-value.sync="bgColor"></color-input>
            </i-form-item>
        </i-form>
    </div>
</template>

<script>
// mapActions
import { mapActions } from 'vuex'

// mixins update attr
import UpdateAttr from '@/admin/mixins/update-attr'

// viusal component element
import { ColorInput } from '@/admin/components'

// localData
import localData from './data/local'
export default {
    name: 'b-blank',
    props: ['onlineData', 'modulesIndex'],
    mixins: [UpdateAttr],
    components: {
        ColorInput
    },
    data() {
        return {
            componentName: localData.componentName
        }
    },
    methods: {
        ...mapActions('viusal', ['updateDataAttr'])
    },
    computed: {
        /**
         * blank 高度
         *
         * @param {String}
         */
        height: {
            get() {
                return this.data.allValue.height
            },
            set(value) {
                // 修改 modules index 对应的属性值
                this._updateDataAttr({
                    attrName: 'height',
                    value
                })
            }
        },
        /**
         * 背景颜色
         *
         * @param {String}
         */
        bgColor: {
            get() {
                return this.data.allValue.bgColor
            },
            set(value) {
                // 修改 modules index 对应的属性值
                this.updateDataAttr = {
                    attrName: 'bgColor',
                    value
                }
            }
        },
        data() {
            return Object.assign({}, localData.data, this.onlineData)
        }
    }
}
</script>

<style scoped>

</style>